<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="hostname" content="feling.net">
    <title>花边记账</title>
    
    <link rel="stylesheet" href="//cdn.feling.net/css/uikit.min.css" media="all">
    <style>
    .uk-grid{margin-left:0}
    .al-spinner {
        background-image: url(https://cdn.feling.net/spinner.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 14px;
        height: 14px;
        vertical-align: middle;
        display: inline-block;
        -webkit-animation: uk-rotate 0.8s infinite linear;
        animation: uk-rotate 0.8s infinite linear;
    }
    .al-spinner-large {
        width: 50px;
        height: 50px;
    }
    </style>

    <link rel="icon" type="image/png" href="//cdn.feling.net/favicon.png">
    
    <script src="//cdn.feling.net/js/jquery-3.3.1.min.js"></script>
    <script src="//cdn.feling.net/js/vue.min.js"></script>
    <script>
        var DateFormat={};!function(a){var b=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],c=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],d=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],e=["January","February","March","April","May","June","July","August","September","October","November","December"],f={Jan:"01",Feb:"02",Mar:"03",Apr:"04",May:"05",Jun:"06",Jul:"07",Aug:"08",Sep:"09",Oct:"10",Nov:"11",Dec:"12"},g=/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.?\d{0,3}[Z\-+]?(\d{2}:?\d{2})?/;a.format=function(){function a(a){return b[parseInt(a,10)]||a}function h(a){return c[parseInt(a,10)]||a}function i(a){var b=parseInt(a,10)-1;return d[b]||a}function j(a){var b=parseInt(a,10)-1;return e[b]||a}function k(a){return f[a]||a}function l(a){var b,c,d,e,f,g=a,h="";return-1!==g.indexOf(".")&&(e=g.split("."),g=e[0],h=e[e.length-1]),f=g.split(":"),3===f.length?(b=f[0],c=f[1],d=f[2].replace(/\s.+/,"").replace(/[a-z]/gi,""),g=g.replace(/\s.+/,"").replace(/[a-z]/gi,""),{time:g,hour:b,minute:c,second:d,millis:h}):{time:"",hour:"",minute:"",second:"",millis:""}}function m(a,b){for(var c=b-String(a).length,d=0;c>d;d++)a="0"+a;return a}return{parseDate:function(a){var b,c,d={date:null,year:null,month:null,dayOfMonth:null,dayOfWeek:null,time:null};if("number"==typeof a)return this.parseDate(new Date(a));if("function"==typeof a.getFullYear)d.year=String(a.getFullYear()),d.month=String(a.getMonth()+1),d.dayOfMonth=String(a.getDate()),d.time=l(a.toTimeString()+"."+a.getMilliseconds());else if(-1!=a.search(g))b=a.split(/[T\+-]/),d.year=b[0],d.month=b[1],d.dayOfMonth=b[2],d.time=l(b[3].split(".")[0]);else switch(b=a.split(" "),6===b.length&&isNaN(b[5])&&(b[b.length]="()"),b.length){case 6:d.year=b[5],d.month=k(b[1]),d.dayOfMonth=b[2],d.time=l(b[3]);break;case 2:c=b[0].split("-"),d.year=c[0],d.month=c[1],d.dayOfMonth=c[2],d.time=l(b[1]);break;case 7:case 9:case 10:d.year=b[3],d.month=k(b[1]),d.dayOfMonth=b[2],d.time=l(b[4]);break;case 1:c=b[0].split(""),d.year=c[0]+c[1]+c[2]+c[3],d.month=c[5]+c[6],d.dayOfMonth=c[8]+c[9],d.time=l(c[13]+c[14]+c[15]+c[16]+c[17]+c[18]+c[19]+c[20]);break;default:return null}return d.date=d.time?new Date(d.year,d.month-1,d.dayOfMonth,d.time.hour,d.time.minute,d.time.second,d.time.millis):new Date(d.year,d.month-1,d.dayOfMonth),d.dayOfWeek=String(d.date.getDay()),d},date:function(b,c){try{var d=this.parseDate(b);if(null===d)return b;for(var e,f=d.year,g=d.month,k=d.dayOfMonth,l=d.dayOfWeek,n=d.time,o="",p="",q="",r=!1,s=0;s<c.length;s++){var t=c.charAt(s),u=c.charAt(s+1);if(r)"'"==t?(p+=""===o?"'":o,o="",r=!1):o+=t;else switch(o+=t,q="",o){case"ddd":p+=a(l),o="";break;case"dd":if("d"===u)break;p+=m(k,2),o="";break;case"d":if("d"===u)break;p+=parseInt(k,10),o="";break;case"D":k=1==k||21==k||31==k?parseInt(k,10)+"st":2==k||22==k?parseInt(k,10)+"nd":3==k||23==k?parseInt(k,10)+"rd":parseInt(k,10)+"th",p+=k,o="";break;case"MMMM":p+=j(g),o="";break;case"MMM":if("M"===u)break;p+=i(g),o="";break;case"MM":if("M"===u)break;p+=m(g,2),o="";break;case"M":if("M"===u)break;p+=parseInt(g,10),o="";break;case"y":case"yyy":if("y"===u)break;p+=o,o="";break;case"yy":if("y"===u)break;p+=String(f).slice(-2),o="";break;case"yyyy":p+=f,o="";break;case"HH":p+=m(n.hour,2),o="";break;case"H":if("H"===u)break;p+=parseInt(n.hour,10),o="";break;case"hh":e=0===parseInt(n.hour,10)?12:n.hour<13?n.hour:n.hour-12,p+=m(e,2),o="";break;case"h":if("h"===u)break;e=0===parseInt(n.hour,10)?12:n.hour<13?n.hour:n.hour-12,p+=parseInt(e,10),o="";break;case"mm":p+=m(n.minute,2),o="";break;case"m":if("m"===u)break;p+=n.minute,o="";break;case"ss":p+=m(n.second.substring(0,2),2),o="";break;case"s":if("s"===u)break;p+=n.second,o="";break;case"S":case"SS":if("S"===u)break;p+=o,o="";break;case"SSS":var v="000"+n.millis.substring(0,3);p+=v.substring(v.length-3),o="";break;case"a":p+=n.hour>=12?"PM":"AM",o="";break;case"p":p+=n.hour>=12?"p.m.":"a.m.",o="";break;case"E":p+=h(l),o="";break;case"'":o="",r=!0;break;default:p+=t,o=""}}return p+=q}catch(w){return console&&console.log&&console.log(w),b}},prettyDate:function(a){var b,c,d;return("string"==typeof a||"number"==typeof a)&&(b=new Date(a)),"object"==typeof a&&(b=new Date(a.toString())),c=((new Date).getTime()-b.getTime())/1e3,d=Math.floor(c/86400),isNaN(d)||0>d?void 0:60>c?"just now":120>c?"1 minute ago":3600>c?Math.floor(c/60)+" minutes ago":7200>c?"1 hour ago":86400>c?Math.floor(c/3600)+" hours ago":1===d?"Yesterday":7>d?d+" days ago":31>d?Math.ceil(d/7)+" weeks ago":d>=31?"more than 5 weeks ago":void 0},toBrowserTimeZone:function(a,b){return this.date(new Date(a),b||"MM/dd/yyyy HH:mm:ss")}}}()}(DateFormat);
    </script>
    <script src="//cdn.feling.net/js/uikit.min.js"></script>
    <script>
        var WithFParams = {
        apiHost: 'https://api.feling.net',
        postJson: function (path, data, resultHandler) {
            data.accessToken = localStorage.accessToken
            var url = this.apiHost + path
            if (path.startsWith('http')) {
                url = path
            }
            return $.ajax({
                type: 'POST',
                contentType: 'application/json;charset=utf-8',
                url: url,
                data: JSON.stringify(data),
                success: resultHandler,
                dataType: 'json'
            })
        },
        postForm: function (path, data, resultHandler) {
            data.accessToken = localStorage.accessToken
            var url = this.apiHost + path
            if (path.startsWith('http')) {
                url = path
            }
            return $.ajax({
                type: 'POST',
                url: url,
                data: data,
                success: resultHandler,
                dataType: 'json'
            })
        }
    }
    </script>

    <script>
    function getParamInQueryParam(key) {
        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
        var r = window.top.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURIComponent(r[2])
        }
        return '';
    }

    var start_day = getParamInQueryParam('start_day')
    var end_day = getParamInQueryParam('end_day')
    if (!start_day) {
        start_day = DateFormat.format.date(new Date(), "yyyyMMdd")
    }
    if (!end_day) {
        end_day = start_day
    }

    var user_name = getParamInQueryParam('user_name')
    var sign = getParamInQueryParam('sign')
    if (user_name) {
        localStorage.book_user_name = user_name
    } else {
        user_name = localStorage.book_user_name
    }
    if (sign) {
        localStorage.book_sgin = sign
    } else {
        sign = localStorage.book_sgin
    }
    if (!user_name || !sign) {
        window.location.replace("https://open.weixin.qq.com/connect/oauth2/authorize?"
                + "appid=ww6f88babe6ddb78da&"
                + "redirect_uri=https%3A%2F%2Fapi.feling.net%2Funclassified%2Fbook%2Fsign"
                + "&response_type=code&scope=snsapi_base&state="
                + start_day + "," + end_day
                + "#wechat_redirect")
    }
    </script>
    
</head>

<body>
    <div id="content" style="margin: 10px;">
        <div style="height: 40px;" v-show="input_focuse"></div>

        <div class="uk-form">
            <div class="uk-form-row">
                开始日期：<input class="uk-form" type="number" placeholder="开始日期" 
                            v-model="start_day" v-on:focus="input_focuse=true" v-on:blur="input_focuse=false">
            </div>
            <div class="uk-form-row">
                结束日期：<input class="uk-form" type="number" placeholder="结束日期" 
                                v-model="end_day" v-on:focus="input_focuse=true" v-on:blur="input_focuse=false">
                <button class="uk-button uk-button-primary" style="float:right;" @click="onQuery">查询</button>
            </div>
        </div>

        <hr style="margin: 15px 0 15px 0;">

        <div v-show="!querying && result.detail_count > 0 && !queryhit" 
            style="margin-bottom:10px;padding:10px;border: 1px solid #E5E5E5;">
            <p>¥ <span class="uk-text-bold uk-text-large uk-text-danger">{{ result.total }}</span> 元</p>
            <p>{{ result.start_day }} 到 {{ result.end_day }}， {{ result.day_count }} 天， {{ result.detail_count }} 行记录</p>
        </div>


        <div style="margin-bottom:10px;border: 1px solid #E5E5E5;" v-show="!querying && result.detail_count > 0 && !queryhit" v-for="detail in result.detail">
            <table class="uk-table uk-table-striped" style="width:100%;margin-bottom:0;">
                <caption>{{ detail.day }}， {{ detail.day_detail_count }} 行记录， ¥ {{ detail.day_total }} 元</caption>
                <thead v-show="detail.day_detail_count > 0">
                    <tr>
                        <th>长度</th>
                        <th>条数</th>
                        <th>单价</th>
                        <th>合计</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="record in detail.day_detail">
                        <td>{{ record.length }}</td>
                        <td>{{ record.num }}</td>
                        <td>{{ record.price / 1000 }}</td>
                        <td>{{ record.single_total }}</td>
                        <td v-if="localStorage.book_sgin">
                            <a v-on:click="onDeleteItem = record" href="#delete-modal" data-uk-modal
                                onmouseover="this.style.color='red';" onmouseout="this.style.color='';">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="uk-text-center">
            <i v-show="querying" class="al-spinner al-spinner-large"></i>
        </div>
        <div v-show="queryhit">
            {{ queryhit }}
        </div>

        <div id="delete-modal" class="uk-modal">
            <div class="uk-modal-dialog">
                <table class="uk-table" style="width:100%;">
                    <caption>{{ onDeleteItem.day }}</caption>
                    <tbody>
                        <tr class="uk-table-middle">
                            <td>{{ onDeleteItem.length }}</td>
                            <td>{{ onDeleteItem.num }}</td>
                            <td>{{ onDeleteItem.price / 1000 }}</td>
                            <td>{{ onDeleteItem.single_total }}</td>
                            <td style="width:70px;">
                                <i v-show="deleteing" class="al-spinner" style="margin-top: 8px;"></i>
                                <button v-on:click="onDelete(onDeleteItem)" class="uk-button uk-button-danger" style="float:right;">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div v-show="deletehit">
                    {{ deletehit }}
                </div>
            </div>
        </div>
        
    </div>
    <script>
    var vm = new Vue({
        el: "#content",
        data: {
            input_focuse: false,
            start_day: start_day,
            end_day: end_day,
            result: {},
            queryhit: '',
            querying: false,
            deleteing: false,
            onDeleteItem: {},
            deletehit: ''
        },
        mounted: function () {
            window.document.title = '花边记账-' + user_name
        },
        methods: {
            onDelete: function(item) {
                this.deletehit = ''
                this.deleteing = true
                WithFParams.postForm('/unclassified/book/delete',
                    {
                        'user_name': user_name,
                        'sign': sign,
                        'id': item.id
                    },
                    (result) => {
                        if (result.success) {
                            onDeleteItem = {}
                            UIkit.modal("#delete-modal").hide()
                            vm.onQuery()
                        } else {
                            vm.deletehit = '删除失败, ' + result.message
                        }
                    }
                ).always(() => {
                    vm.deleteing = false
                })
            },
            onQuery: function() {
                this.querying = true
                this.queryhit = ''
                WithFParams.postForm('/unclassified/book/query',
                    {
                        'user_name': user_name,
                        'start_day': this.start_day,
                        'end_day': this.end_day
                    },
                    (result) => {
                        if (result.success) {
                            if (result.code != 'E000000') {
                                vm.queryhit = result.message
                                return
                            }
                            vm.result = result.data
                        } else {
                            vm.queryhit = '查询失败, ' + result.message
                        }
                    }
                ).always(() => {
                    vm.querying = false
                })
            }
        }
    })
    setTimeout(() => {vm.onQuery()}, 100)
    </script>

</body>

</html>